<template>
	<view>
		<ul>
			<li>
				<view class="left">
					<view class="img1">
						<image-view class="img" :src="item.captureUrl"></image-view>
					</view>
				</view>
				<view class="right">
					<view class="line">
						<view class="title">{{item.monitorName}}</view>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/call_police.png" style="margin-left: 7rpx;"></image>
						<!-- <text class="text">{{item.customMonitorLevelName}}</text> -->
						<text class="text">{{item.monitorLevelName}}</text>
					</view>
					<view class="line_box">
						<uni-icons class="icon" type="contact" size="18"></uni-icons>
						<text class="text" v-if="item.age!=''&&item.age!=null">{{item.age}}{{ $t('warn:yearsOld') }}</text>
						<text class="text" v-else>{{ $t('search:unknown') }}</text>
					</view>
					<view class="line_box">
					<image class="icon" src="/static/images/camera.png" style="margin-left: 7rpx;"></image>
						<text class="text">{{item.deviceName}}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/time.png" style="margin-left: 7rpx;"></image>
						<text class="text">{{item.alarmTime | formatDate('-')}}</text>
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {}
		},
		created() {
			// console.log(this.item)
		},
		methods: {
			
		},
		filters: {
			// 时间戳处理
			 formatDate: function(num){
				  let date = new Date(num);
				          //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				         let y = date.getFullYear();
				         let MM = date.getMonth() + 1;
				         MM = MM < 10 ? ('0' + MM) : MM;//月补0
				         let d = date.getDate();
				         d = d < 10 ? ('0' + d) : d;//天补0
				         let h = date.getHours();
				         h = h < 10 ? ('0' + h) : h;//小时补0
				         let m = date.getMinutes();
				         m = m < 10 ? ('0' + m) : m;//分钟补0
				         let s = date.getSeconds();
				         s = s < 10 ? ('0' + s) : s;//秒补0
				         return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s;
			 }

		}
	}
</script>

<style scoped>
	ul,
	li {
		list-style: none;
	}

	ul {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
	}

	ul li {
		padding: 30rpx 0;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
	}

	.left {
		width: 43%;
		display: flex;
		align-items: center;
		justify-content: start;
	}

	.left .img1 {
		width: 100%;
	}

	.img1:first-child .img {
		padding-right: 10rpx;
	}

	.img1 .img {
		width: 100%;
		height: 260rpx;
		border-radius: 10rpx;
	}

	.right {
		width: 57%;
		padding-left: 25rpx;
	}

	.right .line {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.right .line .title {
		font-size: 34rpx;
		padding-bottom: 10rpx;
	}

	.right .line .Proportion {
		font-size: 40rpx;
		background-color: #f76f3a;
		padding: 10rpx 20rpx;
		color: #fff;
		border-radius: 8rpx;
		margin-bottom: 10rpx;
	}

	.right .line_box {
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 6rpx 0;
	}

	.right .line_box .text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.icon {
		padding:5rpx;
		width: 40rpx;
		height: 40rpx;
	}
</style>
